<template>
	<div class="my-goods-list">
		<MyTable :arr="list">
		
		<template #Header>
				<th>#</th>
				<th>商品名称</th>
				<th>价格</th>
				<th>标签</th>
				<th>操作</th>
		</template>

		<template #Body="scope">
				<td> {{ scope.obj.id }} </td>
				<td> {{ scope.obj.goods_name }} </td>
				<td>{{ scope.obj.goods_price }}</td>
				<td>
					<div>
						<input style="width: 150px" class="tag-input form-control" type="text" 
						v-model="scope.obj.inputValue"
						v-if="scope.obj.inputVisible"
						v-focus
						@blur="scope.obj.inputVisible = false"
						@keyup.esc="scope.obj.inputValue = ''"
						@keyup.enter="fn(scope.obj)"
						/>
						<button class="btn btn-primary btn-sm add-tag"
						v-else
						@click="scope.obj.inputVisible = true"
						>
							+Tag
						</button>
					</div>
					<span class="badge bg-warning text-dark"
								v-for="(item, index) in scope.obj.tags" :key="index">
								{{ item }} 
					</span>
				</td>
				<td><button class="btn btn-danger btn-sm" @click="del(scope.obj.id)">删除</button></td>
		</template>
		
		</MyTable>
	</div>
</template>

<script>
	// 接口：GTE  https://www.escook.cn/api/goods
import MyTable from '@/components/MyTable.vue'

import axios from 'axios'

	export default {
		components: {
			MyTable
		},

		data() {
			return {
				list: []
			};
		},

		created(){
			axios({
				url: 'https://www.escook.cn/api/goods',
			}).then(({data: {data}}) => {
				console.log(data);
				this.list = data
			})
		},

		methods:{
			fn(obj){
					obj.tags.push(obj.inputValue)
					obj.inputValue = ''
			},
			del(id){
				this.list = this.list.filter(item => item.id !== id)
			}
		}
	};
</script>

<style>
</style>
